{% extends "base.html" %}
{% block css %}

{% end %}
{% block container %}
    <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-8">
              <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">当前实时画面</h3>
                  </div>
                  <div class="panel-body">
                    <img id="liveImg" src="" width="700" height="500">
<!--                        <iframe   src="http://192.168.43.74:8080/stream" width="700" height="500"   frameborder="1"  name="name"     scrolling="auto">-->
<!--                        </iframe>-->
                  </div>
              </div>
              <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">提示信息</h3>
                  </div>
                  <div class="panel-body" style="min-height: 120px;margin: auto">
                    <div class="alert alert-success" role="alert">操作提示</div>
                  </div>
              </div>
          </div>
          <div class="col-xs-6 col-md-4">
              <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">方向控制</h3>
                  </div>
                  <div class="panel-body" style="margin: 30px;margin-left: 46px">
                      <div class="row">
                          <button id="change" class="btn btn-large btn-primary">状态切换(水/路)</button>
                      </div>
                      <br/>
                        <div class="row" >
                          <div class="col-md-4"></div>
                          <div class="col-md-4"><button id="advance" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span><br/>前进</button></div>
                          <div class="col-md-4"></div>
                        </div>
                      <div class="row">
                          <div class="col-md-4"><button id="left" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span><br/>左转</button></div>
                          <div class="col-md-4"></div>
                          <div class="col-md-4"><button id="right" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span><br/>右转</button></div>
                        </div>
                      <div class="row">
                          <div class="col-md-4"></div>
                          <div class="col-md-4"><button id="back" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span><br/>后退</button></div>
                          <div class="col-md-4"></div>
                      </div>
                      <br>
                      <div class="row">
                          <div class="col-md-4"><button id="add" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon glyphicon-plus-sign" aria-hidden="true"></span><br/>加速</button></div>
                          <div class="col-md-4"><button id="stop" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon glyphicon-ban-circle" aria-hidden="true"></span><br/>暂停</button></div>
                          <div class="col-md-4"><button id="del" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon glyphicon-minus-sign" aria-hidden="true"></span><br/>减速</button></div>
                      </div>
                      <br>
                      <br>
                      <br>
                      <div class="row">
                          <div class="col-md-6"><button id="behind_left_left" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span><br/>左后轮左转</button></div>
                          <div class="col-md-6"><button id="behind_left_right" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span><br/>左后轮右转</button></div>
                      </div>
                      <br>
                      <div class="row">
                          <div class="col-md-6"><button id="behind_right_left" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span><br/>右后轮左转</button></div>
                          <div class="col-md-6"><button id="behind_right_right" class="btn btn-large btn-primary" type="button"><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span><br/>右后轮右转</button></div>
                      </div>



                  </div>
              </div>
              <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">车辆速度</h3>
                  </div>
                  <div class="panel-body" style="min-height: 120px;margin: auto">
                      <!--<div class="alert alert-success" role="alert">操作提示</div>-->
                      <div id="container-speed" style="min-width: 330px; min-height: 200px;float: left"></div>
                  </div>
              </div>
          </div>
        </div>
{% end %}

{% block script %}
<script type="text/javascript">
var img = document.getElementById("liveImg");
var arrayBuffer;

//使用WebSocket连接到服务器
var ws = new WebSocket("ws://{{url}}/camera"); ws.binaryType = 'arraybuffer';   //设置为要接收的数据是二进制

ws.onopen = function(){console.log("connection was established");};  //建立连接时调用
ws.onmessage = function(evt){
	arrayBuffer = evt.data;
        //解码接收的数据并使用base64进行编码
	img.src = "data:image/jpeg;base64," + encode(new Uint8Array(arrayBuffer));
};

window.onbeforeunload = function(){
    //当窗口（选项卡）关闭时，通知服务器会话结束
    ws.close(1000);
};

function encode (input) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;

    while (i < input.length) {
        chr1 = input[i++];
        chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
        chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;

        if (isNaN(chr2)) {
            enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
            enc4 = 64;
        }
        output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                  keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
}
</script>
<script type="text/javascript">
    $('#advance').click(function(){
        console.log("前进");
        getApi('w');
    });
    $('#back').click(function(){
        console.log("后退");
        getApi('s');
    });
    $('#left').click(function(){
        console.log("左转");
        getApi('a');
    });
    $('#right').click(function(){
        console.log("右转");
        getApi('d');
    });
    $('#change').click(function(){
        console.log("切换");
        getApi('e');
    });
    $('#behind_left_left').click(function(){
        console.log("左后轮左转");
        getApi('bll');
    });
    $('#behind_left_right').click(function(){
        console.log("左后轮右转");
        getApi('blr');
    });
    $('#behind_right_left').click(function(){
        console.log("右后轮左转");
        getApi('brl');
    });
    $('#behind_right_right').click(function(){
        console.log("右后轮右转");
        getApi('brr');
    });
    $('#add').click(function(){
        console.log("加速");
        getApi('u');
        var point,inc =2;
        point = chart1.series[0].points[0];
		newVal = point.y + inc;
		if (newVal < 0 || newVal > 20) {
			newVal = point.y - inc;
		}
		point.update(newVal);
    });
    $('#del').click(function(){
        console.log("减速");
        getApi('o');
        var point,inc =2;
        point = chart1.series[0].points[0];
		newVal = point.y - inc;
		if (newVal < 0 || newVal > 20) {
			newVal = point.y + inc;
		}
		point.update(newVal);
    });
    $('#stop').click(function(){
        console.log("停止");
        getApi('q');
    });
    //后台请求控制命令
    function getApi(way_i) {
        $.ajax({
            url: 'http://{{url}}/tocontrol',
            type: 'get',
            dataType: 'json',
            data: { way: way_i},
            success: function (data) {
                //方法中传入的参数data为后台获取的数据
                console.log(data);
                $('.alert').html(data['msg']).addClass('alert-success').show().delay(500).fadeOut();
            }
        })
    }
    $(document).bind("keydown", function(event){
    var msg = '';
    if(event.which == 87){
            console.log("按下w键");
            $('#advance').click();
            event.preventDefault();
        }
        if(event.which== 83){
            console.log("按下S键");
            $('#back').click();
            event.preventDefault();
        }
        if(event.which == 65 ){
            console.log("按下A键");
            $('#left').click();
            event.preventDefault();
        }
        if(event.which == 68 ){
            console.log("按下D键");
            $('#right').click();
            event.preventDefault();
        }
        if(event.which == 81 ){
            console.log("按下Q键");
            $('#stop').click();
            event.preventDefault();
        }

        if(event.which == 38 ){
            console.log("按下向上键");
            $('#add').click();
            event.preventDefault();
        }

        if(event.which == 40 ){
            console.log("按下向下键");
            $('#del').click();
            event.preventDefault();
        }

});
</script>
<script type="text/javascript">
    // 公共配置
Highcharts.setOptions({
	chart: {
		type: 'solidgauge'
	},
	title: null,
	pane: {
		center: ['50%', '85%'],
		size: '140%',
		startAngle: -90,
		endAngle: 90,
		background: {
			backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
			innerRadius: '60%',
			outerRadius: '100%',
			shape: 'arc'
		}
	},
	tooltip: {
		enabled: false
	},
	yAxis: {
		stops: [
			[0.1, '#55BF3B'], // green
			[0.5, '#DDDF0D'], // yellow
			[0.9, '#DF5353'] // red
		],
		lineWidth: 0,
		minorTickInterval: null,
		tickPixelInterval: 400,
		tickWidth: 0,
		title: {
			y: -70
		},
		labels: {
			y: 16
		}
	},
	plotOptions: {
		solidgauge: {
			dataLabels: {
				y: 5,
				borderWidth: 0,
				useHTML: true
			}
		}
	}
});
// 速度仪表
var chart1 = Highcharts.chart('container-speed', {
	yAxis: {
		min: 0,
		max: 20,
		title: {
			text: '速度'
		}
	},
	credits: {
		enabled: false
	},
	series: [{
		name: '速度',
		data: [10],
		dataLabels: {
			format: '<div style="text-align:center"><span style="font-size:25px;color:' +
			((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
			'<span style="font-size:12px;color:silver">km/h</span></div>'
		},
		tooltip: {
			valueSuffix: ' km/h'
		}
	}]
});
</script>
{% end %}
